<style lang="less">
 @import './style.less';
</style>

<template>
    <div class="video-container">
        <div class="op-header">
            <el-button
                class="add"
                size="small"
                type="info"
                @click="add">
                <i class="el-icon-circle-plus icon-right" />新增视频
            </el-button>
            <div class="search">
                <el-cascader
                    class="enable-select"
                    :clearable="true"
                    v-model="enableValue"
                    :options="enableOptions"
                    :props="cascaderProps"
                    placeholder="启用状态" />
                <el-cascader
                    class="department-select"
                    :clearable="true"
                    v-model="videoValue"
                    :options="classVideo"
                    :props="cascaderProps"
                    placeholder="全部分类"/>
                <el-input
                    class="search-input"
                    size="small"
                    v-model="searchInput"
                    placeholder="请输入查询关键字"
                    prefix-icon="el-icon-search" />
                <el-button
                    class="search-button"
                    size="small"
                    type="primary"
                    @click="search">
                    <i class="el-icon-search icon-right" />查询
                </el-button>
            </div>
        </div>
         <table-ex
            :rows="videos"
            :total="videosTotal"
            :columns="columns"
            :options="options"
            :on-option="onClickOption"
            :on-operation="onClickOperation"
            :on-page-change="onPageChange"/>
        <dialog-ex
            v-if="!!dialogModal"
            :title="this.dialogModal === 'add' ? '新增视频' : '编辑视频'"
            :form="form"
            :mode="dialogModal"
            :init="currentVideo"
            :uploadParams="uploadParams"
            :ctrl-values="classVideo" />
    </div>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import { deepCopy } from '@/utils/util'
    import pageConfig from './config'

    import tableEx from '@/components/table/tableEx'
    import dialogEx from '@/components/dialog/dialogEx'

    export default {
        name: 'video-container',
        components: {
            'table-ex': tableEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                searchInput: '',
                dialogModal: '',
                enableValue: [],
                videoValue: [],
                currentVideo: null,
                uploadParams: {
                    purpose: 'video',
                    ownerId: 0,
                    sequence: 1
                },
                cascaderProps: {
                    value: 'id',
                    label: 'name',
                    children: 'subClasses'
                },
                enableOptions: pageConfig.enableOptions,
                columns: pageConfig.columns,
                options: pageConfig.options,
                form: {
                    items: pageConfig.formItems,
                    actions: {
                        cancel: () => {
                            this.dialogModal = ''
                        },
                        confirm: (data, mode) => {
                            console.log(data)
                            if (mode === 'edit') {
                                this.editVideo(data)
                            } else {
                                this.addVideo(data)
                            }
                            this.dialogModal = ''
                        }
                    }
                }
            }
        },

        /**
         * 生命钩子
         **/
        created() {
            this.loadData()
        },
        mounted() {},

        /**
         * 计算
         **/
        computed: {
            ...mapGetters({
                videos: 'videos',
                videosTotal: 'videosTotal',
                classVideo: 'classVideo'
            })
        },
        /**
         * 监控
         **/
        watch: {},

        /**
         * 事件
         **/
        methods: {

            ...mapActions([
                'getVideos',
                'removeVideo',
                'getClassVideo',
                'addVideo',
                'editVideo'
            ]),
            ...mapMutations([
                'SETVIDEOPAGE'
            ]),

            loadData() {
                this.getVideos()
                this.getClassVideo({
                  class_type: 'key_class_knowledge'
                })
            },

            add() {
                this.dialogModal = 'add'
            },

            search() {
                const filter = {
                    title: this.searchInput ? this.searchInput : null,
                    categoryId: !!this.videoValue ? this.videoValue[this.videoValue.length - 1] : null,
                    enabled: !!this.enableValue ? this.enableValue[0] : null
                }
                this.SETVIDEOPAGE({
                    number: 1,
                    filter
                })
                this.getVideos()
            },

            batchOption() {},

            onClickOption(option, rows) {
                if (option === 'batchrefresh') {
                    this.loadData()
                } else {
                    let lIds = rows.map(item => { return item.id })
                    this.removeVideo({ lIds })
                }
            },

            onClickOperation(oper, row) {
                if (oper.prop === 'edit') {
                    let temp = deepCopy(row)
                    temp.categoryId = [temp.categoryId]
                    this.currentVideo = temp;
                    this.dialogModal = 'edit'
                } else if(oper.prop === 'delete') {
                    let params = {
                        "lIds": [row.id]
                    }
                    this.removeVideo(params)
                }
            },

            onPageChange(number) {
                this.SETVIDEOPAGE({ number })
                this.getVideos()
            }
        },
    }
</script>

